Twitter BootstrapでのFormの書き方

最新のBootstrap2.0では書き方が変わりましたので↓のは使えません。。
代わりにこちらのツールをどうぞ(サンプルが仕様ですｗ)。

Bootstrapの[form][2]の書き方メモ。bootstrapのページだとソース見ながらじゃないと分かりにくいのでまとめる。

テキストフィールド

コード

<div class="clearfix">
    <label for="xlInput">X-Large input</label>
    <div class="input">
        <input class="xlarge" id="xlInput"
            name="xlInput" size="30" type="text">
    </div>
</div>

表示

セレクト

コード

<div class="clearfix">
    <label for="normalSelect">Select</label>
    <div class="input">
        <select name="normalSelect"
            id="normalSelect">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
        </select>
    </div>
</div>

表示

マルチセレクト

コード

<div class="clearfix">
    <label for="multiSelect">Multiple select</label>
    <div class="input">
        <select class="medium" size="5"
            multiple="multiple" name="multiSelect"
            id="multiSelect">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
        </select>
    </div>
</div>

表示

編集不可なテキストフィールド

コード

<div class="clearfix">
    <label>Uneditable input</label>
    <div class="input">
        <span class="uneditable-input">Some
            value here</span>
    </div>
</div>

表示

使用不可なテキストフィールド

コード

<div class="clearfix">
    <label for="disabledInput">Disabled
        input</label>
    <div class="input">
        <input class="xlarge disabled"
            id="disabledInput" name="disabledInput"
            size="30" type="text"
            placeholder="Disabled input here… carry on."
            disabled="">
    </div>
</div>

表示

使用不可なテキストエリア

コード

<div class="clearfix">
    <label for="disabledInput">Disabled
        textarea</label>
    <div class="input">
        <textarea class="xxlarge" name="textarea"
            id="textarea" rows="3" disabled=""></textarea>
    </div>
</div>

表示

### エラーのあるテキストフィールド #### コード

Input with error

Small snippet of help text

#### 表示 ### OKなテキストフィールド #### コード

Input with success

Success!

#### 表示 ### 警告のあるテキストフィールド #### コード

Input with warning

Ruh roh!

#### 表示 ### 先頭に文字があるテキストフィールド #### コード

Prepended text

Here's some help text

#### 表示 ### 先頭にチェックボックスのあるテキストフィールド #### コード

Prepended checkbox

#### 表示 ### 末尾にチェックボックスのあるテキストフィールド #### コード

Appended checkbox

#### 表示 ### ファイル #### コード

File input

#### 表示 ### リスト形式のチェックボックス #### コード

List of options

Option one is this and that—be sure to include why it’s great
Option two can also be checked and included in form results
Option three can—yes, you guessed it—also be checked and included in form results. Let's make it super long so that everyone can see how it wraps, too.
Option four cannot be checked as it is disabled.

Note: Labels surround all the options for much larger click areas and a more usable form.

#### 表示

List of options

Option one is this and that—be sure to include why it’s great
Option two can also be checked and included in form results
Option three can—yes, you guessed it—also be checked and included in form results. Let's make it super long so that everyone can see how it wraps, too.
Option four cannot be checked as it is disabled.

Note: Labels surround all the options for much larger click areas and a more usable form.

### 日付範囲 #### コード

Date range

to All times are shown as Pacific Standard Time (GMT -08:00).

#### 表示

テキストエリア

コード

<div class="clearfix">
    <label for="textarea">Textarea</label>
    <div class="input">
        <textarea class="xxlarge" id="textarea2"
            name="textarea2" rows="3"></textarea>
        <span class="help-block"> Block of
            help text to describe the field above if
            need be. </span>
    </div>
</div>

表示

### リスト形式のラジオボックス #### コード

List of options

Option one is this and that—be sure to include why it’s great
Option two can is something else and selecting it will deselect options 1

#### 表示 ### ボタン #### コード

#### 表示

IK.AM